<template>
    <div class="container">
        <div class="am-cf am-padding am-padding-bottom-0">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">友情链接</strong> /
                <small>Link/Index</small>
            </div>
        </div>

        <hr>

        <div class="am-g">
            <div class="am-u-sm-12 am-u-md-6">
                <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                        <router-link :to="{name:'create'}" type="button" class="am-btn am-btn-default">
                            <span class="am-icon-plus"></span>新增
                        </router-link>
                        <button type="button" class="am-btn am-btn-default" @click="delete_all">
                            <span class="am-icon-trash-o"></span> 删除
                        </button>
                    </div>
                </div>
            </div>
            <div class="am-u-sm-12 am-u-md-3">
                <div class="am-input-group am-input-group-sm">
                    <input type="text" class="am-form-field" v-model="keywords">
                    <span class="am-input-group-btn">
                        <button class="am-btn am-btn-default" type="button" @click="handerSearch">搜索</button>
                    </span>
                </div>
            </div>
        </div>


        <div class="am-g">
            <div class="am-u-sm-12">
                <template>
                    <el-table :data="links" style="width: 100%" ref="multipleTable"
                              @selection-change="handleSelectionChange()">
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column label="编号" width="80">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="链接名称" width="100">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="链接地址" width="300">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.address }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="链接描述">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.description }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否显示" width="80">
                            <template slot-scope="scope">
                                <template v-if="scope.row.is_show">
                                    <i class="el-icon-success"></i>
                                </template>
                                <template v-else>
                                    <i class="el-icon-error"></i>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
                                    编辑
                                </el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="block" style="margin-left: 800px;margin-top: 50px;">
                        <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.size"
                                       @current-change="handleCurrentChange" :current-page.sync="page.currentPage">
                        </el-pagination>
                    </div>


                    <!--编辑模态框-->
                    <el-dialog title="编辑友情链接" :visible.sync="dialogFormVisible" center>
                        <el-form :model="from" :rules="rules" ref="form">

                            <el-form-item label="链接名称" :label-width="formLabelWidth" prop="name">
                                <el-input v-model="from.name" auto-complete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="链接地址" :label-width="formLabelWidth" prop="address">
                                <el-input v-model="from.address" auto-complete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="链接描述" :label-width="formLabelWidth" prop="description">
                                <el-input v-model="from.description" auto-complete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="链接排序" :label-width="formLabelWidth" prop="sort_order">
                                <el-input v-model.number="from.sort_order" auto-complete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="是否显示" :label-width="formLabelWidth" prop="is_show">
                                <el-radio v-model="from.is_show" :label="1">是</el-radio>
                                <el-radio v-model="from.is_show" :label="0">否</el-radio>
                            </el-form-item>
                        </el-form>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="editDo(from)">确 定</el-button>
                        </div>
                    </el-dialog>

                </template>
            </div>

        </div>

        <footer class="admin-content-footer" style="margin-top:100px;">
            <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
        </footer>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                links: [],
                keywords: '',
                page: {
                    total: 0,
                    size: 0,
                    currentPage: 1,
                    num: 1
                },

                multipleSelection: [],
                dialogFormVisible: false,
                formLabelWidth: '100px',
                from: {
                    name: '',
                    address: '',
                    description: '',
                    sort_order: '',
                    is_show: '',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入链接名称', trigger: 'blur'},
                        {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'change'}
                    ],
                    address: [
                        {required: true, message: '请输入链接地址', trigger: 'blur'},
                        {type: 'url', message: '请输入正确链接地址', trigger: 'change'}
                    ],
                    description: [
                        {required: true, message: '请输入链接描述', trigger: 'blur'}
                    ],
                    sort_order: [
                        {type: 'number', message: '请输入数字', trigger: 'change'}
                    ],
                }
            }
        },
        created() {
            this.init()
        },
        methods: {
            handerSearch() {
                this.init();
            },
            handleCurrentChange(val) {
                this.page.num = val;
                this.init()
            },
            init() {
                axios.get(`http://mishop.test/admin/crm/links?page=${this.page.num}&keywords=${this.keywords}`)
                    .then((response) => {
                        console.log(response.data)
                        this.links = response.data.data;
                        this.page.total = response.data.total;
                        this.page.size = response.data.per_page
                    });
            },
            // 查出要编辑的值
            handleEdit(index, row) {
                // console.log(index, row);
                //记录索引
                // this.linksIndex = index;
                //记录数据
                this.from = row;
                //显示弹窗
                this.dialogFormVisible = true;
            },
            // 执行编辑操作
            editDo(form) {
                // let index = this.linksIndex;
                //根据索引，赋值到links指定的数
                // this.links[index] = form;
                let id = this.from.id;
                axios.put('http://mishop.test/admin/crm/links/update', this.from)
                    .then((response) => {
                        console.log(response.data);
                        //关闭弹窗
                        this.dialogFormVisible = false;
                    })
            },
            //删除
            handleDelete(index, row) {
                // console.log(index, row);
                axios.delete(`http://mishop.test/admin/crm/links/${row.id}`)
                    .then((response) => {
                        this.init();
                    })
            },
            // 多选删除
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            delete_all() {
                if (this.multipleSelection.length == 0) {
                    this.$message.error('你必须至少选择一条数据');
                }

                let checked_id = this.multipleSelection.map((item, index) => {
                    return item.id
                })

                axios.post(`http://mishop.test/admin/crm/links/delete_all`, {checked_id: checked_id}).then(response => {
                    this.init()
                })
            }
        }
    }
</script>


<style>
    .el-icon-success {
        color: #67c23a;
    }

    .el-icon-error {
        color: #f56c6c;
    }
</style>
